<script setup>
import { ref, reactive, watchEffect, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { Toast } from "@/utils";
// import { validateIdCard } from "../../../utils/validate.js";
import { ApiUrl } from "@/common/ApiUrl";
import { request } from "@/common/http";
import dayjs from "dayjs";
import Area from "../../components/Area/Index.vue";
import Bank from "../../components/Bank/Index.vue";
import { bankList } from "../../components/Bank/bank.js";
import { AreaJson } from "../../components/Area/area.js";
import { formatPickerDate, getFormattedCurrentDate } from "@/utils/date";
// 步骤条当前激活的索引 0-结算类型 1-基础信息 2-经营信息 3-场地信息
let active = ref(0);
// 步骤条对应的导航栏标题
let navBarTitle = ref({
	0: "添加分销商户",
	1: "商户基础信息",
	2: "商户经营信息",
	3: "场地信息"
})
const step = ref([
	"结算类型",
	"基础信息",
	"经营信息",
	"场地信息"
])

// 商户类型
const entryMerType =ref([
	{
		id: 1,
		value: "企业"
	},
	{
		id: 2,
		value: "小微"
	},
])
// 账户类型
const bankAcctType = ref([
	{
		id: 1,
		value: "对公账户"
	},
	{
		id: 2,
		value: "对私账户"
	},
])
/* 页面表单提交字段 */
let params = reactive({
	id: null,
	relatedMerchantAccountId: null,
	entryMerType: 1, // 商户类型 1-企业 2-小微，必填
	bankAcctType: 1, // 账户类型 1-对公账户 2-对私账户 必填（小微只能选择对私）
	legalName: "", // 法人/负责人姓名，必填
	legalIdno: "", // 法人/负责人身份证号码，必填
	legalMp: null, // 法人/负责人手机号码，必填
	legalAddress: "", // 法人/负责证件上的地址，必填
	legalStartCertIdExpires: null, // 法人/负责人身份证有效期（始），格式 YYYYMMDD，必填
	legalIdExpires: null, // 法人/负责人身份证有效期（至），格式 YYYYMMDD
	regAddr: "", // 注册地址
	custTel: null, // 客服电话，必填
	custAddr: "", // 经营地址，必填
	contName: "", // 联系人姓名，必填
	contPhone: "", // 联系人手机号，必填
	customerEmail: "", // 电子邮箱，必填
	idFrontUrl: "", // 法人证件照正面图片URL，必传
	idBackUrl: "", // 法人证件照背面图片URL，必传
	cardName: "", // 结算银行卡开户姓名，必填
	cardIdMask: null, // 结算银行卡号，必填
	bankCode: null, // 结算银行卡所属银行code，必填
	provCode: "0011", // 结算银行开户省份代码，必传
	areaCode: "1100", // 结算银行开户地区代码，必传
	bankCardFrontUrl: "", // 银行卡正面图片URL，必传
	bankCardBackUrl: "", // 银行卡背面图片URL
	storeFrontUrl: "", // 店面门头照图片URL，必传
	storeInsideUrl: "", // 店面内景照图片URL，必传
	cashierDeskUrl: "", // 收银台照片URL
	lineComsuerUrl: "", // 营业执照URL，企业必传
	merName: "", // 商户名，小微商户填写负责人姓名，必填
	merShortName: "", // 商户名称简称，必填
	licenseCode: "", // 营业执照编码，如三证合一传三证合一码，企业必填
	merStartValidDate: "", // 营业执照有效期开始日期 ，格式20280910 ，企业必填
	merValidDate: "", // 营业执照有效期截止日期，若为长期有效，固定为“20991231”，企业必填
})
let file = ref(null); // 上传的图片文件
let idCardFrontUrl = ref(""); // 身份证正面照图片URL
let idCardBackUrl = ref(""); // 身份证反面照图片URL
let isShowSelectAreaPopup = ref(false); // 是否显示选择省市弹窗
let province = ref("北京市"); // 选择的省份
let city = ref("北京市"); // 选择的城市
let address = ref("请选择"); // 选择的省市地址
let bank = ref(""); // 选择的银行
let isShowBankPopup = ref(false); // 结算银行卡所属银行弹窗
let bankFrontUrl = ref(""); // 银行卡正面照图片URL
let bankBackUrl = ref(""); // 银行卡反面照图片URL
let startDateText = ref(""); // 身份证有效期（开始）
let endDateText = ref(""); // 身份证有效期（截止）
let showStartDate = ref(false); // 是否显示开始日期弹窗
let showEndDate = ref(false); // 是否显示结束日期弹窗
let lineComsuerUrl = ref(""); // 营业执照URL
let lineComsuerStartDate = ref(""); // 营业执照有效期（开始）
let lineComsuerEndDate = ref(""); // 营业执照有效期（截止）
let showLineComsuerStartDate = ref(false); // 是否显示营业执照有效期（开始）弹窗
let showLineComsuerEndDate = ref(false); // 是否显示营业执照有效期（截止）弹窗
let storeFrontUrl = ref(""); // 店面门头照图片URL，必传
let storeInsideUrl = ref(""); // 店面内景照图片URL，必传
let cashierDeskUrl = ref(""); // 收银台照片URL
let legalStartCertIdExpires = ref("");
let legalEndCertIdExpires = ref("");
let lineComsuerStartDateValue = ref("");
let lineComsuerEndDateValue = ref("");

onLoad((query) => {
	params.relatedMerchantAccountId = query.userId;
	if (query.id) {
		params.id = query.id;
		/* 查询当前用户的商户进件信息 */
		handleGetMerchantInfo(params.id);
		// handleGetMerchantInfo(1015);
	} else {
		legalStartCertIdExpires.value = getFormattedCurrentDate();
		legalEndCertIdExpires.value = getFormattedCurrentDate();
		lineComsuerStartDateValue.value = getFormattedCurrentDate();
		lineComsuerEndDateValue.value = getFormattedCurrentDate();
	}
})

// 商户类型按钮点击事件
const handleSelectMerType = (item) => {
	params.entryMerType = item.id;
	// 小微只能选择对私账户
	if (params.entryMerType == 2) {
		params.bankAcctType = 2;
	}
}

// 账户类型按钮点击事件
const handleSelectBankAcctType = (item) => {
	if (params.entryMerType == 2 && item.id == 1) {
		return Toast("小微企业只能选择对私账户")
	}
	params.bankAcctType = item.id;
}

// 上传身份证正反面照
const handleUploadIdCard = (type) => {
	chooseImage(type, type == "front" ? "02" : "03")
}

// 上传银行卡正反面照
const handleUploadBank = (type) => {
	chooseImage(type, "05")
}

// 上传营业执照
const handleUploadLineComsuer = (type) => {
	chooseImage(type, "01")
}

// 上传店面照
const handleUploadDoor = (type) => {
	chooseImage(type, "04")
}

const chooseImage = (type, fileType) => {
	uni.chooseImage({
		count: 1, // 只允许选择一张图片
		success: (res) => {
			const tempFilePath = res.tempFilePaths[0];
			console.log("tempFilePath", tempFilePath)
			uni.getFileInfo({
				filePath: tempFilePath,
				success: (infoRes) => {
					// 文件大小限制：2MB
					const maxSize = 2 * 1024 * 1024;
					if (infoRes.size > maxSize) {
						return Toast("图片大小不能超过2MB");
					}
					file.value = res.tempFiles[0];
					uploadImage(type, fileType)
					// this.imageUrl = tempFilePath;
				},
				fail: () => {
					Toast("获取文件信息失败");
				}
			});
		},
		fail: () => {
			Toast("选择图片失败");
		}
	});
}

const uploadImage = (type, fileType) => {
	if (!file.value) {
		return Toast("请先选择图片");
	}
	uni.uploadFile({
		url: `${ApiUrl.uploadUrl}${ApiUrl.pictureUpload}`,
		filePath: file.value.path,
		name: 'file',
		header: {
			'Content-Type': 'multipart/form-data',
		},
		formData: {
			fileType,
			userId: params.relatedMerchantAccountId
		},
		success: (uploadRes) => {
			let data = JSON.parse(uploadRes.data);
			data = data.data;
			if (type == "front") {
				// 身份证正面
				idCardFrontUrl.value = data.webPath;
				params.idFrontUrl = data.destPath;
			} else if (type == "back") {
				// 身份证反面
				idCardBackUrl.value = data.webPath;
				params.idBackUrl = data.destPath;
			} else if (type == "bankFront") {
				// 银行卡正面
				bankFrontUrl.value = data.webPath;
				params.bankCardFrontUrl = data.destPath;
			} else if (type == "bankBack") {
				// 银行卡反面
				bankBackUrl.value = data.webPath;
				params.bankCardBackUrl = data.destPath;
			} else if (type == "lineComsuer") {
				// 营业执照
				lineComsuerUrl.value = data.webPath;
				params.lineComsuerUrl = data.destPath;
			} else if (type == "storeFront") {
				// 店面门头照图片
				storeFrontUrl.value = data.webPath;
				params.storeFrontUrl = data.destPath;
			} else if (type == "storeInside") {
				// 内景图
				storeInsideUrl.value = data.webPath;
				params.storeInsideUrl = data.destPath;
			} else if (type == "cashierDesk") {
				// 收银台照
				cashierDeskUrl.value = data.webPath;
				params.cashierDeskUrl = data.destPath;
			} 
			Toast("图片上传成功");
		},
		fail: (error) => {
			Toast("图片上传失败");
			console.error('上传失败', error);
		}
	});
}


// 开始时间弹窗确定按钮点击事件
const handleStartDateConfirm = (e) => {
	console.log("e", e);
	startDateText.value = dayjs(e.value).format("YYYYMMDD");
	params.legalStartCertIdExpires = startDateText.value;
	showStartDate.value = false;
}

// 结束时间弹窗确定按钮点击事件
const handleEndDateConfirm = (e) => {
	endDateText.value = dayjs(e.value).format("YYYYMMDD");
	params.legalIdExpires = endDateText.value;
	showEndDate.value = false;
}

// 营业执照有效期（开始）弹窗确定按钮点击事件
const handleLineComsuerStartDateConfirm = (e) => {
	lineComsuerStartDate.value = dayjs(e.value).format("YYYYMMDD");
	params.merStartValidDate = lineComsuerStartDate.value;
	showLineComsuerStartDate.value = false;
}

// 营业执照有效期（截止）弹窗确定按钮点击事件
const handleLineComsuerEndDateConfirm = (e) => {
	lineComsuerEndDate.value = dayjs(e.value).format("YYYYMMDD");
	params.merValidDate = lineComsuerEndDate.value;
	showLineComsuerEndDate.value = false;
}

// 省市选择弹窗确定按钮点击事件
const handleSelectAreaConfirm = (e) => {
	const { province, city } = e.detail.currentTarget.dataset;
	address.value = `${province}/${city}`;
	handleSelectAreaCancel();
}

// 省市选择弹窗取消按钮点击事件
const handleSelectAreaCancel = () => {
	isShowSelectAreaPopup.value = false;
}

// 省市选择弹窗内容改变事件
const handleSelectAreaChange = (column1, column2) => {
	console.log(province, city)
	province.value = column1.name;
	params.provCode = column1.value;
	if (column2) {
		city.value = column2.name;
		params.areaCode = column2.value;
	}
}

// 结算银行卡所属银行弹窗确定按钮点击事件
const handleBankConfirm = (e) => {
	isShowBankPopup.value = false;
	params.bankCode = e.value;
	bank.value = e.text;
}

/* 上一步按钮点击事件 */
const handlePrev = () => {
	if (active.value > 0) {
		active.value--;
	}
}

// 下一步/提交按钮点击事件
const handleNextOrSubmit = () => {
	if (active.value == 0) {
		// 结算类型
		active.value = 1;
	} else if(active.value == 1) {
		// 基础信息
		if (!idCardFrontUrl.value) return Toast("请上传身份证人像照片");
		if (!idCardBackUrl.value) return Toast("请上传身份证国徽照片");
		if (!params.legalName) return Toast("请输入法人/负责人姓名");
		if (!params.legalIdno) return Toast("请输入法人/负责人身份证号码");
		// if (!validateIdCard(params.legalIdno)) return Toast("身份证号码格式错误，请重新输入");
		if (!params.legalMp) return Toast("请输入法人/负责人手机号码");
		if (!params.legalAddress) return Toast("请输入法人/负责人证件上的地址");
		if (!params.legalStartCertIdExpires) return Toast("请选择法人/负责人身份证有效期（始）");
		// if (!params.legalIdExpires) return Toast("请选择法人/负责人身份证有效期（至）");
		if (!params.regAddr && params.entryMerType == 1) return Toast("请输入注册地址");
		if (!params.custTel) return Toast("请输入客服电话");
		if (!params.custAddr) return Toast("请输入经营地址");
		if (!params.contName) return Toast("请输入联系人姓名");
		if (!params.contPhone) return Toast("请输入联系人手机号");
		if (!params.customerEmail) return Toast("请输入电子邮箱");
		if (!params.bankCardFrontUrl) return Toast("请上传银行卡正面照片");
		if (!params.cardName) return Toast("请输入结算银行卡开户姓名");
		if (!params.cardIdMask) return Toast("请输入结算银行卡号");
		if (!params.bankCode) return Toast("请选择结算银行卡所属银行");
		if (address.value.includes("请选择")) return Toast("请选择结算银行卡开户地区");
		active.value = 2;
	} else if (active.value == 2) {
		// 经营信息
		if (!params.lineComsuerUrl && params.entryMerType == 1) return Toast("请上传营业执照图片");
		if (!params.merName) return Toast("请输入商户名负责人姓名");
		if (!params.merShortName) return Toast("请输入商户名称简称");
		if (!params.licenseCode && params.entryMerType == 1) return Toast("请输入营业执照编码");
		if (!params.merStartValidDate && params.entryMerType == 1) return Toast("请选择营业执照有效期（开始）");
		if (!params.merValidDate && params.entryMerType == 1) return Toast("请选择营业执照有效期（开始）");
		active.value = 3;
	} else {
		// 场地信息
		if (!params.storeFrontUrl) return Toast("请上传店面门头照图片");
		if (!params.storeInsideUrl) return Toast("请上传店面内景照图片");
		handleSubmitMerchantInfo();
	}
}

// 提交商户信息
const handleSubmitMerchantInfo = () => {
	request({
		url: `${ApiUrl.auditMerchant}`,
		method: "POST",
		data: {
			...params
		}
	}).then(res => {
		if (res.code == 200) {
			Toast("添加成功");
			uni.navigateBack();
		} else {
			Toast(res.message, "error");
		}
	})
}

/* 查询当前用户的商户进件信息 */
const handleGetMerchantInfo = (id) => {
	request({
		url: `${ApiUrl.getAuditMerchant}`,
		method: "POST",
		data: {
			relatedMerchantAccountId: id
		}
	}).then(res => {
		console.log("当前用户的商户进件信息", res)
		if (res.code == 200) {
			params = Object.assign(params, res.data);
			if (params.idFrontUrl) {
				params.idFrontUrl = `${ApiUrl.ImageUrl}/${params.idFrontUrl}`;
				idCardFrontUrl.value = res.data.idFrontUrl;
			}
			if (params.idBackUrl) {
				params.idBackUrl = `${ApiUrl.ImageUrl}/${params.idBackUrl}`;
				idCardBackUrl.value = res.data.idBackUrl;
			}
			if (params.bankCardFrontUrl) {
				params.bankCardFrontUrl = `${ApiUrl.ImageUrl}/${params.bankCardFrontUrl}`;
				bankFrontUrl.value = res.data.bankCardFrontUrl;
			}
			if (params.bankCardBackUrl) {
				params.bankCardBackUrl = `${ApiUrl.ImageUrl}/${params.bankCardBackUrl}`;
				bankBackUrl.value = res.data.bankCardBackUrl;
			}
			if (params.storeFrontUrl) {
				params.storeFrontUrl = `${ApiUrl.ImageUrl}/${params.storeFrontUrl}`;
				storeFrontUrl.value = res.data.storeFrontUrl;
			}
			if (params.storeInsideUrl) {
				params.storeInsideUrl = `${ApiUrl.ImageUrl}/${params.storeInsideUrl}`;
				storeInsideUrl.value = res.data.storeInsideUrl;
			}
			if (params.cashierDeskUrl) {
				params.cashierDeskUrl = `${ApiUrl.ImageUrl}/${params.cashierDeskUrl}`;
				cashierDeskUrl.value = res.data.cashierDeskUrl;
			}
			if (params.lineComsuerUrl) {
				params.lineComsuerUrl = `${ApiUrl.ImageUrl}/${params.lineComsuerUrl}`;
				lineComsuerUrl.value = res.data.lineComsuerUrl;
			}
			let bankFilter = bankList[0].filter(item => item.value == params.bankCode);
			bank.value = bankFilter[0].text;
			let areaFilter = AreaJson.filter(item => item.value == params.provCode);
			console.log("areaFilter", areaFilter)
			province.value = areaFilter[0].title;
			let cityFilter = areaFilter[0].cities.filter(item => item.value == params.areaCode);
			city.value = cityFilter[0].title;
			address.value = `${province.value}/${city.value}`;
			startDateText.value = params.legalStartCertIdExpires;
			endDateText.value = params.legalIdExpires;
			lineComsuerStartDate.value = params.merStartValidDate;
			lineComsuerEndDate.value = params.merValidDate;
			legalStartCertIdExpires.value = formatPickerDate(params.legalStartCertIdExpires);
			legalEndCertIdExpires.value = formatPickerDate(params.legalIdExpires);
			lineComsuerStartDateValue.value = formatPickerDate(params.merStartValidDate);
			lineComsuerEndDateValue.value = formatPickerDate(params.merValidDate);
		} else {
			Toast(res.message, "error");
		}
	})
}

watchEffect(() => {
  uni.setNavigationBarTitle({
  	title: navBarTitle.value[active.value]
  })
})

watch(() => params.legalName, (val) => {
	if (val) {
		params.contName = val;
		params.cardName = val;
		params.merName = val;
	}
})

watch(() => params.legalMp, (val) => {
	if (val) {
		params.contPhone = val;
		params.custTel = val;
	}
})

</script>

<template>
	<view class="account_add">
		<view class="step_box">
			<view class="step_item" :class="{ 'step_active': active > index, 'step_dot_active': active >= index }" v-for="(item, index) in step" :key="index">
				<view class="dot" :class="{ 'active': active >= index }"></view>
				<view class="name" :class="{ 'active': active >= index }">{{ item }}</view>
			</view>
		</view>
		<view class="step_content">
			<!-- 结算类型 -->
			<view v-if="active == 0" class="step1_wrap">
				<view class="title">请选择商户类型</view>
				<view class="tab">
					<view
						class="tab_item"
						:class="{ 'active': params.entryMerType == item.id }"
						v-for="item in entryMerType"
						:key="item.id"
						@click="handleSelectMerType(item)">
						{{ item.value }}
					</view>
				</view>
				<view class="title title2">您需要绑定的储蓄卡账户类型是哪种</view>
				<view class="tab tab2">
					<view
						class="tab_item"
						:class="{ 'active': params.bankAcctType == item.id }"
						v-for="item in bankAcctType"
						:key="item.id"
						@click="handleSelectBankAcctType(item)">
						{{ item.value }}
					</view>
				</view>
				<view class="row">
					<view class="label channel">渠道</view>
					<view class="content active">汇付</view>
				</view>
			</view>
			<!-- 基础信息 -->
			<view v-if="active == 1" class="step2_wrap">
				<view class="title"><text class="must">*</text>上传身份信息</view>
				<view class="upload_id_card">
					<view class="left" @click="handleUploadIdCard('front')">
						<block v-if="!idCardFrontUrl">
							<image class="icon_card" src="/static/image/user/id.png" mode="aspectFill"></image>
							<text>点击上传身份证人像面</text>
						</block>
						<image v-else class="id_card_front" :src="`${ApiUrl.ImageUrl}/${idCardFrontUrl}`"></image>
					</view>
					<view class="right" @click="handleUploadIdCard('back')">
						<block v-if="!idCardBackUrl">
							<image class="icon_card" src="/static/image/user/id.png" mode="aspectFill"></image>
							<text>点击上传身份证国徽面</text>
						</block>
						<image v-else class="id_card_back" :src="`${ApiUrl.ImageUrl}/${idCardBackUrl}`"></image>
					</view>
				</view>
				<view class="row row1">
					<text class="must">*</text>
					<view class="label" v-html="'法人/负责人<br/>姓名'	"></view>
					<input v-model.trim="params.legalName" placeholder-class="placeholder" placeholder="请输入法人/负责人姓名" />
				</view>
				<view class="row row1">
					<text class="must">*</text>
					<view class="label" v-html="'法人/负责人<br/>身份证号码'"></view>
					<input v-model.trim="params.legalIdno" maxlength="18" placeholder-class="placeholder" placeholder="请输入法人/负责人身份证号码" />
				</view>
				<view class="row row1">
					<text class="must">*</text>
					<view class="label" v-html="'法人/负责人<br/>手机号码'"></view>
					<input v-model="params.legalMp" type="number" placeholder-class="placeholder" placeholder="请输入法人/负责人手机号码" />
				</view>
				<view class="row row1">
					<text class="must">*</text>
					<view class="label" v-html="'法人/负责人<br/>证件上的地址'"></view>
					<input v-model="params.legalAddress" placeholder-class="placeholder" placeholder="请输入法人/负责人证件上的地址" />
				</view>
				<view class="row row1" @click="showStartDate = true">
					<text class="must">*</text>
					<view class="label" v-html="'法人/负责人<br/>身份证有效期始'"></view>
					<view class="content" :class="{ 'active': startDateText }">{{ startDateText ? startDateText : "请选择" }}</view>
					<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
				</view>
				<view class="row row1" @click="showEndDate = true">
					<text class="must">*</text>
					<view class="label" v-html="'法人/负责人<br/>身份证有效期至'"></view>
					<view class="content" :class="{ 'active': endDateText }">{{ endDateText ? endDateText : "请选择" }}</view>
					<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
				</view>
				<view v-if="params.entryMerType == 1" class="row row1">
					<view class="label"><text v-if="params.entryMerType == 1" class="must">*</text>注册地址</view>
					<input v-model="params.regAddr" placeholder-class="placeholder" placeholder="请输入注册地址" />
				</view>
				<view class="row row1">
					<view class="label"><text class="must">*</text>客服电话</view>
					<input v-model="params.custTel" type="number" placeholder-class="placeholder" placeholder="请输入客服电话" />
				</view>
				<view class="row row1">
					<view class="label"><text class="must">*</text>经营地址</view>
					<input v-model="params.custAddr" placeholder-class="placeholder" placeholder="请输入经营地址" />
				</view>
				<view class="row row1">
					<view class="label"><text class="must">*</text>联系人姓名</view>
					<input v-model="params.contName" placeholder-class="placeholder" placeholder="请输入联系人姓名" />
				</view>
				<view class="row row1">
					<view class="label"><text class="must">*</text>联系人手机号</view>
					<input v-model="params.contPhone" placeholder-class="placeholder" placeholder="请输入联系人手机号" />
				</view>
				<view class="row row1 email">
					<view class="label"><text class="must">*</text>电子邮箱</view>
					<input v-model="params.customerEmail" placeholder-class="placeholder" placeholder="请输入电子邮箱" />
				</view>
				<view class="divider"></view>
				<view class="title title3"><text class="must">*</text>上传结算信息</view>
				<view class="upload_id_card">
					<view class="left" @click="handleUploadBank('bankFront')">
						<block v-if="!bankFrontUrl">
							<image class="icon_card" src="/static/image/user/id.png" mode="aspectFill"></image>
							<text>点击上传银行卡正面</text>
						</block>
						<image v-else class="bank_img" :src="`${ApiUrl.ImageUrl}/${bankFrontUrl}`" mode="aspectFill"></image>
					</view>
					<view class="right" @click="handleUploadBank('bankBack')">
						<block v-if="!bankBackUrl">
							<image class="icon_card" src="/static/image/user/id.png" mode="aspectFill"></image>
							<text>点击上传银行卡背面</text>
						</block>
						<image v-else class="bank_img" :src="`${ApiUrl.ImageUrl}/${bankBackUrl}`" mode="aspectFill"></image>
					</view>
				</view>
				<view class="row row1">
					<text class="must">*</text>
					<view class="label" v-html="'结算银行卡<br/>开户姓名'"></view>
					<input v-model="params.cardName" placeholder-class="placeholder" placeholder="请输入结算银行卡开户姓名" />
				</view>
				<view class="row row1" @click="isShowBankPopup = true">
					<text class="must">*</text>
					<view class="label" v-html="'结算银行卡<br/>所属银行'"></view>
					<view class="content" :class="{ 'active': bank }">{{ bank ? bank : "请选择" }}</view>
					<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
				</view>
				<view class="row row1">
					<view class="label"><text class="must">*</text>结算银行卡号</view>
					<input v-model="params.cardIdMask" type="number" placeholder-class="placeholder" placeholder="请输入结算银行卡号" />
				</view>
				<view class="row row1" @click="isShowSelectAreaPopup = true">
					<text class="must">*</text>
					<view class="label" v-html="'结算银行卡<br/>开户地区'"></view>
					<view class="content">{{ address }}</view>
					<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 经营信息 -->
			<view v-if="active == 2" class="step3_wrap">
				<block v-if="params.entryMerType == 1">
					<view class="title"><text class="must">*</text>上传企业信息</view>
					<view class="door" @click="handleUploadLineComsuer('lineComsuer')">
						<block v-if="!lineComsuerUrl">
							<image class="empty" src="/static/image/user/image.png" mode="aspectFill"></image>
							<text>点击上传营业执照图片</text>
						</block>
						<image v-else class="door_img" :src="`${ApiUrl.ImageUrl}/${lineComsuerUrl}`"></image>
					</view>
				</block>
				<view class="row row1">
					<text class="must">*</text>
					<view class="label" v-html="'商户名<br/>负责人姓名'"></view>
					<input v-model="params.merName" placeholder-class="placeholder" placeholder="请输入商户名/负责人姓名" />
				</view>
				<view class="row row1">
					<view class="label"><text class="must">*</text>商户名称简称</view>
					<input v-model="params.merShortName" placeholder-class="placeholder" placeholder="请输入商户名称简称" />
				</view>
				<view v-if="params.entryMerType == 1" class="row row1">
					<view class="label"><text class="must">*</text>营业执照编码</view>
					<input v-model="params.licenseCode" placeholder-class="placeholder" placeholder="请输入营业执照编码" />
				</view>
				<view v-if="params.entryMerType == 1" class="row row1" @click="showLineComsuerStartDate = true">
					<text class="must">*</text>
					<view class="label" v-html="'营业执照<br/>有效期(开始)'"></view>
					<view class="content">{{ lineComsuerStartDate ? lineComsuerStartDate : "请选择" }}</view>
					<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
				</view>
				<view class="row row1" @click="showLineComsuerEndDate = true">
					<text v-if="params.entryMerType == 1" class="must">*</text>
					<view class="label" v-html="'营业执照<br/>有效期(截止)'"></view>
					<view class="content">{{ lineComsuerEndDate ? lineComsuerEndDate : "请选择" }}</view>
					<image src="/static/image/icon/icon_arrow_right.png" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 场地信息 -->
			<view v-if="active == 3" class="step4_wrap">
				<view class="title"><text class="must">*</text>上传场地图片</view> 
				<view class="door" @click="handleUploadDoor('storeFront')">
					<block v-if="!storeFrontUrl">
						<image class="empty" src="/static/image/user/image.png" mode="aspectFill"></image>
						<text>点击上传店面门头照图片</text>
					</block>
					<image v-else class="door_img" :src="`${ApiUrl.ImageUrl}/${storeFrontUrl}`"></image>
				</view>
				<view class="interior">
					<view class="left" @click="handleUploadDoor('storeInside')">
						<block v-if="!storeInsideUrl">
							<image class="empty" src="/static/image/user/image.png" mode="aspectFill"></image>
							<text>点击上传店面内景图片</text>
						</block>
						<image v-else class="interior_img" :src="`${ApiUrl.ImageUrl}/${storeInsideUrl}`"></image>
					</view>
					<view class="right" @click="handleUploadDoor('cashierDesk')">
						<block v-if="!cashierDeskUrl">
							<image class="empty" src="/static/image/user/image.png" mode="aspectFill"></image>
							<text>点击上传收银台照</text>
						</block>
						<image v-else class="interior_img" :src="`${ApiUrl.ImageUrl}/${cashierDeskUrl}`"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_next">
			<view v-if="active > 0" @click="handlePrev">上一步</view>
			<view @click="handleNextOrSubmit">{{ active == 3 ? "提交" : "下一步"}}</view>
		</view>
		
		<!-- 省市选择弹窗 -->
		<Area
			:province="province"
			:city="city"
			:show="isShowSelectAreaPopup"
			@confirm="handleSelectAreaConfirm"
			@cancel="handleSelectAreaCancel"
			@change="handleSelectAreaChange" />
			
		<!-- 选择结算银行卡所属银行弹窗 -->
		<Bank :show="isShowBankPopup" @confirm="handleBankConfirm" />
		<!-- 开始时间弹窗 -->
		<u-datetime-picker
			:show="showStartDate"
			v-model="legalStartCertIdExpires"
			mode="date"
			:minDate="-28800000"
			:maxDate="4102415999000"
			@cancel="showStartDate = false"
			@confirm="handleStartDateConfirm" />
		<!-- 结束时间弹窗 -->
		<u-datetime-picker
			:show="showEndDate"
			v-model="legalEndCertIdExpires"
			mode="date"
			:minDate="-28800000"
			:maxDate="4102415999000"
			@cancel="showEndDate = false"
			@confirm="handleEndDateConfirm" />
		<!-- 营业执照有效期（开始）弹窗 -->
		<u-datetime-picker
			:show="showLineComsuerStartDate"
			v-model="lineComsuerStartDateValue"
			mode="date"
			:minDate="-28800000"
			:maxDate="4102415999000"
			@cancel="showLineComsuerStartDate = false"
			@confirm="handleLineComsuerStartDateConfirm" />
		<!-- 营业执照有效期（结束）弹窗 -->
		<u-datetime-picker
			:show="showLineComsuerEndDate"
			v-model="lineComsuerEndDateValue"
			mode="date"
			:minDate="-28800000"
			:maxDate="4102415999000"
			@cancel="showLineComsuerEndDate = false"
			@confirm="handleLineComsuerEndDateConfirm" />
	</view>
</template>

<style lang="scss">
.account_add {
	width: 750rpx;
	box-sizing: border-box;
	padding-bottom: 124rpx;
	.step_box {
		width: 750rpx;
		height: 168rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 0 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		.step_item {
			position: relative;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;
			&.step_active::after {
				background-color: #FFE5E5 !important;
			}
			&.step_dot_active {
				&::after {
					position: absolute;
					z-index: 9;
					top: 13rpx !important;
				}
				.name {
					margin-top: 20rpx;
				}
			}
			&:not(:last-child) {
				&::after {
					position: absolute;
					z-index: 9;
					top: 10rpx;
					left: 58rpx;
					content: "";
					width: 160rpx;
					height: 3rpx;
					background: #C6C7CB;
				}
			}
			.dot {
				position: relative;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background: #C6C7CB;
				&.active {
					width: 32rpx;
					height: 32rpx;
					background: #FFE5E5;
					position: relative;
					top: -3rpx;
					&::before {
						position: absolute;
						top: 6rpx;
						right: 0;
						bottom: 0;
						left: 6rpx;
						content: "";
						width: 20rpx;
						height: 20rpx;
						background: #FF4638;
						border-radius: 50%;
					}
				}
			}
			.name {
				font-size: 24rpx;
				line-height: 32rpx;
				color: #C6C7CB;
				text-align: center;
				margin-top: 30rpx;
				&.active {
					color: #303030;
				}
			}
		}
	}
	.step_content {
		width: 750rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 26rpx 32rpx 38rpx;
		.title {
			font-weight: 500;
			font-size: 32rpx;
			line-height: 48rpx;
			color: #141414;
			&.title2 {
				margin-top: 64rpx;
			}
			&.title3 {
				padding-top: 24rpx;
			}
		}
		.row {
			width: 100%;
			min-height: 96rpx;
			box-sizing: border-box;
			padding: 28rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&.row1 {
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
				.label {
					width: 220rpx !important;
				}
				&.email {
					margin-bottom: 38rpx;
				}
			}
			.label {
				font-weight: 500;
				font-size: 28rpx;
				color: #3B3D3D;
				&.channel {
					width: 106rpx !important;
				}
			}
			.content {
				flex: 1;
				font-size: 28rpx;
				color: #B6BDBD;
				&.active {
					color: "#3B3D3D";
				}
			}
			image {
				flex-shrink: 0;
				width: 32rpx;
				height: 32rpx;
				margin-left: 12rpx;
			}
			input {
				flex: 1;
				font-size: 28rpx;
				line-height: 33rpx;
				color: #3B3D3D;
				background: none;
				outline: none;
				border-radius: none;
				border: none;
			}
			.placeholder {
				color: #B6BDBD;
			}
		}
		.step1_wrap {
			.tab {
				display: flex;
				padding-left: 8rpx;
				margin-top: 24rpx;
				&.tab2 {
					margin-bottom: 24rpx;
				}
				.tab_item {
					width: 212rpx;
					height: 72rpx;
					background: #F6F6FB;
					border-radius: 4rpx;
					font-size: 28rpx;
					color: #646466;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					&:not(:last-child) {
						margin-right: 16rpx;
					}
					&.active {
						border: 2rpx solid #FF776A;
						color: #FF766C;
						background: unset;
					}
				}
			}
		}
		.step2_wrap {
			.upload_id_card {
				margin: 28rpx 0 38rpx;
				display: flex;
				justify-content: space-between;
				view {
					width: 336rpx;
					height: 180rpx;
					background: #F6F7FB;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.icon_card {
						width: 84rpx;
						height: 84rpx;
					}
					text {
						display: block;
						font-size: 16rpx;
						color: #969699;
						text-align: center;
					}
					.id_card_front,
					.id_card_back,
					.bank_img {
						width: 336rpx;
						height: 180rpx;
						border-radius: 16rpx;
					}
				}
			}
			.divider {
				width: 750rpx;
				height: 24rpx;
				background: #F8F9FB;
				margin: 0 -32rpx;
			}
		}
		.step3_wrap {
			
		}
		.step4_wrap {
			.interior {
				display: flex;
				justify-content: space-between;
				view {
					width: 332rpx;
					height: 226rpx;
					background: #F6F7FB;
					border-radius: 16rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.empty {
						width: 64rpx;
						height: 64rpx;
					}
					text {
						display: block;
						font-size: 16rpx;
						color: #969699;
						text-align: center;
					}
					.interior_img {
						width: 332rpx;
						height: 226rpx;
						border-radius: 16rpx;
					}
				}
			}
		}
	}
	.door {
		margin: 20rpx 0;
		width: 686rpx;
		height: 200rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.empty {
			width: 64rpx;
			height: 64rpx;
		}
		text {
			display: block;
			font-size: 16rpx;
			color: #969699;
			text-align: center;
		}
		.door_img {
			width: 686rpx;
			height: 200rpx;
			border-radius: 16rpx;
		}
	}
	.btn_next {
		width: 686rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 100rpx auto 0;
		view {
			width: 50%;
			height: 80rpx;
			background: linear-gradient( 90deg, #FF766C 0%, #FF4638 100%);
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			&:nth-child(2) {
				margin-left: 30rpx;
				
			}
		}
	}
	.must {
		color: #FF4638;
	}
}
</style>